<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">教师管理平台</h2>
        <el-button icon="el-icon-menu" class="toggle-btn" @click="toggleSidebar"></el-button>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          background-color="#0b1b33"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse="isSidebarCollapse"
          router
      >
        <el-menu-item index="/kcgl">
          <el-icon><document /></el-icon>
          <span>课程管理</span>
        </el-menu-item>
        <el-menu-item index="/answer">
          <el-icon><QuestionFilled /></el-icon>
          <span>答疑管理</span>
        </el-menu-item>
        <el-menu-item index="/teacherper">
          <el-icon><setting /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区 -->
    <div class="main-content" :class="{ 'sidebar-collapse': isSidebarCollapse }">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">个人中心</h1>
      </div>

      <!-- 个人信息卡片 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3 class="card-title">基本信息</h3>
        </div>

        <div class="user-info">
          <div class="avatar-container">
            <img :src="userInfo.avatar" alt="用户头像" class="user-avatar" />
            <el-button type="text" @click="handleChangeAvatar">更换头像</el-button>
          </div>

          <el-form :model="userInfo" label-width="100px" class="info-form">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" disabled />
            </el-form-item>
            <el-form-item label="工号">
              <el-input v-model="userInfo.teacherId" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email" disabled />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" disabled />
            </el-form-item>
            <el-form-item label="所属院系">
              <el-input v-model="userInfo.department" disabled />
            </el-form-item>
            <el-form-item label="注册时间">
              <el-input v-model="userInfo.registerTime" disabled />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleEditInfo">编辑信息</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <!-- 密码修改卡片 -->
      <el-card class="password-card">
        <div class="card-header">
          <h3 class="card-title">修改密码</h3>
        </div>

        <el-form :model="passwordForm" ref="passwordFormRef" label-width="120px" class="password-form">
          <el-form-item label="当前密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password" show-password />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" show-password />
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleUpdatePassword">保存修改</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 账户安全卡片 -->
      <el-card class="security-card">
        <div class="card-header">
          <h3 class="card-title">账户安全</h3>
        </div>

        <div class="security-items">
          <div class="security-item">
            <div class="item-left">
              <el-icon><mobile /></el-icon>
              <div class="item-info">
                <h4>手机号</h4>
                <p>{{userInfo.phone ? formatPhone(userInfo.phone) : '未绑定'}}</p>
              </div>
            </div>
            <div class="item-right">
              <el-button type="text" @click="handleBindPhone">
                {{userInfo.phone ? '更换' : '绑定'}}
              </el-button>
            </div>
          </div>

          <div class="security-item">
            <div class="item-left">
              <el-icon><message /></el-icon>
              <div class="item-info">
                <h4>邮箱</h4>
                <p>{{userInfo.email ? formatEmail(userInfo.email) : '未绑定'}}</p>
              </div>
            </div>
            <div class="item-right">
              <el-button type="text" @click="handleBindEmail">
                {{userInfo.email ? '更换' : '绑定'}}
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
  Document,
  QuestionFilled,
  Setting,
  Message,
  Lock,
  Edit,
  Check,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 侧边栏相关状态
const isSidebarCollapse = ref(false)
const activeMenu = ref('teacherper')
const toggleSidebar = () => {
  isSidebarCollapse.value = !isSidebarCollapse.value
}

// 个人信息相关状态
const userInfo = reactive({
  name: '王教授',
  teacherId: 'T2023001',
  avatar: 'https://picsum.photos/200/200?random=1',
  email: 'wang@example.com',
  phone: '13812345678',
  department: '计算机科学与技术学院',
  registerTime: '2023-01-15',
  twoFactorEnabled: false,
})

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 格式化手机号
const formatPhone = (phone) => {
  return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
}

// 格式化邮箱
const formatEmail = (email) => {
  const parts = email.split('@')
  return parts[0].substring(0, 2) + '****' + '@' + parts[1]
}

// 处理编辑信息
const handleEditInfo = () => {
  ElMessage.info('编辑信息功能开发中...')
}

// 处理更换头像
const handleChangeAvatar = () => {
  ElMessage.info('更换头像功能开发中...')
}

// 处理更新密码
const handleUpdatePassword = () => {
  if (!passwordForm.oldPassword) {
    ElMessage.error('请输入当前密码')
    return
  }

  if (!passwordForm.newPassword) {
    ElMessage.error('请输入新密码')
    return
  }

  if (passwordForm.newPassword.length < 6) {
    ElMessage.error('新密码长度不能少于6位')
    return
  }

  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致')
    return
  }

  // 模拟密码修改
  setTimeout(() => {
    ElMessage.success('密码修改成功，请使用新密码登录')
    passwordForm.oldPassword = ''
    passwordForm.newPassword = ''
    passwordForm.confirmPassword = ''
  }, 500)
}

// 处理绑定手机号
const handleBindPhone = () => {
  ElMessage.info(userInfo.phone ? '更换手机号功能开发中...' : '绑定手机号功能开发中...')
}

// 处理绑定邮箱
const handleBindEmail = () => {
  ElMessage.info(userInfo.email ? '更换邮箱功能开发中...' : '绑定邮箱功能开发中...')
}

// 处理两步验证
const handleTwoFactor = () => {
  ElMessage.info(userInfo.twoFactorEnabled ? '管理两步验证功能开发中...' : '开启两步验证功能开发中...')
}

onMounted(() => {
  // 模拟加载用户信息
})
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: #0b1b33;
  color: #fff;
  transition: width 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #1f334b;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.toggle-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}

.el-menu-vertical-demo {
  border-right: none;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  transition: margin-left 0.3s ease-in-out;
}

.sidebar-collapse .main-content {
  margin-left: 64px; /* 侧边栏折叠后，主内容区调整左边距 */
}

/* 面包屑样式 */
.breadcrumb {
  margin-bottom: 10px;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 卡片样式 */
.info-card, .password-card, .security-card {
  margin-bottom: 20px;
}

.card-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  gap: 40px;
}

.avatar-container {
  text-align: center;
  width: 150px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.info-form {
  flex: 1;
}

/* 密码表单样式 */
.password-form {
  max-width: 600px;
}

/* 安全设置样式 */
.security-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.security-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.item-left el-icon {
  font-size: 24px;
  color: #909399;
}

.item-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 500;
}

.item-info p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}
</style>
